<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>文件列表</title>
        <header th:replace="sys/head :: html"></header>
    </head>
    <body>
    <div class="layui-upload">
        <div class="layui-upload">
            <input type="hidden" name="userImage" required lay-verify="required" />
            <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
            <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
        </div>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>常规使用：普通图片上传</legend>
    </fieldset>
    <div class="layui-upload">
        <input type="hidden" name="img1" required lay-verify="required" />
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="width: 230px;height: 230px;">
            <p id="demoText"></p>
        </div>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>上传多张图片</legend>
    </fieldset>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>指定允许上传的文件类型</legend>
    </fieldset>
    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
    <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
    <button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>上传视频</legend>
    </fieldset>
    <div class="layui-form-item" id="videoUp">
        <label class="layui-form-label" style="height: 137px; line-height: 117px">视频</label>
        <input name="classVideo" id="videourl"  value="" autocomplete="off" class="layui-input" type="hidden">
        <div class=" layui-upload-drag" id="video" style="border-left: 0px;" type="video">
            <i class="layui-icon">&#xe654;</i>
            <p>点击上传</p>
            <video id="demo9" src="" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -60px;"/>
        </div>
        <input type="button" value="预览" onclick="openVideo()" style="margin-left: 30px">
    </div>
    </body>
    <script type="text/javascript">
        layui.use('upload',function(){
            var $ = layui.jquery
                ,upload = layui.upload;

            upload.render({
                elem: '#fileBtn'
                ,url: appPath + '/other/files/uploadImg'
                ,accept: 'file'
                ,field:"layuiFile"
                ,auto: false
                ,bindAction: '#uploadBtn'
                ,done: function(res){
                    alert(res.data.src);
                    $("[name=userImage]").val(res.data.src);
                }
            });


            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: appPath + '/other/files/uploadImg'
                ,field:"layuiFile"
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("[name=img1]").val(res.data.src);
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: appPath + '/other/files/uploadImg'
                ,field:"layuiFile"
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 230px;height: 230px;">')
                    });
                }
                ,done: function(res){
                    //上传完毕
                }
            });

            //上传视频
            var uploadInst=upload.render({
                elem: '#video'
                ,url: appPath + '/other/files/uploadVideo'
                ,field:"layuiVideo"
                ,data:{"dir":"media"}
                ,accept: 'video' //视频
                // ,before:function (obj) {
                //     $('#demo9').css('display','block').attr('src', "http://p6nngxvb7.bkt.clouddn.com/FsyjSltTtkVtzepa_w7zsnS_S7zO"); //链接（base64）http://p6nngxvb7.bkt.clouddn.com/FsyjSltTtkVtzepa_w7zsnS_S7zO
                // }
                ,done: function(res){
                    if(res.code==1){
                        layer.alert(res.message,5);
                    }
                    if(res.error>0){
                        return layer.msg(res.message);
                    }
                    if(res.error==0){
                        alert("res.url:"+res.url);
                        $("#videourl").val(res.url);
                        $("#demo9").attr("src",res.url);
                        layer.alert("上传成功",{offset:['200px','450px'],icon:6});
                    }
                }
                ,error:function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
    <script type="text/javascript">
        function openVideo() {

            var classVideo = document.getElementById("videourl").value;
            var index = layer.open({
                type: 2,
                content: appPath + '/other/files/goLook?classVideo='+classVideo,
                area: ['600px', '450px'],
                offset:'t',
                maxmin: true,
                end: function () {

                }
            });
        }
    </script>
    <script>
        var table;
        var cols =[ //表头
            {type:'checkbox', fixed: 'left'}
            ,{field: 'id', title: 'ID', width:0, sort: true, fixed: 'left'}
            ,{field: 'name', title: '用户名', width:80}
            ,{field: 'downloadUrl', title: '下载次数'}
            ,{field: 'createTime', title: '创建时间'}
            ,{fixed: 'right', title: '操作', toolbar: '#toolbar', width: 150}
        ];
        layui.use('table', function(){
            table = layui.table;
            var form = layui.form;
            //第一个实例
            table.render({
                elem: '#dataTable'
                ,height: 'full-160'
                ,url: appPath + '/other/files/listByMap' //数据接口
                ,page: true //开启分页
                ,cols: [
                    cols
                ]
            });
            //监听提交
            form.on('submit(search)', function(data){
                var name = data.field.username;
                table.render({
                    elem: '#dataTable'
                    ,height: 'full-160'
                    ,url: appPath + '/other/files/listByMap' //数据接口
                    ,where:data.field
                    ,page: true //开启分页
                    ,cols: [
                        cols
                    ]
                });
                return false;
            });
            //监听工具条
            table.on('tool(table)', function(obj){
                var data = obj.data;
                if(obj.event === 'download'){
                    layer.confirm('确定要下载么', function(index){
                        $.ajax({
                            url: appPath + '/other/files/update',
                            type: 'post',
                            data: {id:data.id, downloadNum:obj.data.downloadNum+1},
                            dataType: 'json',
                            success: function (result) {
                                if(result.code == 200){
                                    layer.alert("开始下载", {
                                            icon: 1
                                        },
                                        function() {
                                            window.open(obj.data.downloadUrl);
                                            //关闭当前frame
                                            xadmin.close();
                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                            //table.reload("dataTable");
                                        });
                                }else{
                                    layer.alert(result.msg);
                                }
                            }
                        })
                    });
                } else if(obj.event === 'edit'){
                    xadmin.open('编辑文件信息',appPath + '/other/files/toEdit?id='+data.id, 600, 400);
                }
            });

        });
        function delAll (argument) {

            //获取选中状态
            var checkStatus = table.checkStatus('dataTable');
            //获取选中数量
            var selectCount = checkStatus.data.length;
            if(selectCount == 0){
                layer.msg('批量删除至少选中一项数据',function(){});
                return false;
            }
            layer.confirm('真的要删除选中的项吗？',function(index){
                layer.close(index);
                index = layer.load(1, {shade: [0.1,'#fff']});

                var isStr="";
                for(var i=0; i<selectCount; i++){
                    isStr = isStr + "," + checkStatus.data[i].id;
                }
                isStr = isStr.substring(1);
                $.ajax({
                    type:'post',
                    data:{"ids":isStr},
                    url:appPath + '/other/files/delAll',
                    success:function(data){
                        if(data.code==200){
                            $('#search').click();
                        }
                        layer.close(index);
                        layer.msg(data.msg);
                    },error:function(code){
                        parent.layer.msg('操作失败!');
                    }
                });
            })
        }
    </script>
</html>